<template>
    <div class="all">
    <template v-if="!$route.path.startsWith('/login')">
  <t-layout class="t-layout">
    <t-header>
      <t-head-menu value="item1" class="head">
        <template #logo>
          <img class="logo" src="../src/img/Clock.png" alt="logo" />
        </template>
          <div class="left-icon"><t-icon class="t-menu__operations-icon" name="sunny" /></div>
          <t-icon class="t-menu__operations-icon" name="moon" />
          <t-icon class="t-menu__operations-icon" name="notification" />
          <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg" size="large"></t-avatar>User
      </t-head-menu>
    </t-header>
    <t-layout>
      <t-aside class="aside">
        <t-menu theme="light" value="dashboard">
          <router-link to="/home">
            <t-menu-item value="Home" class="menu-item">
              <template #icon>
                <t-icon name="home"/>
              </template>
              Home
            </t-menu-item>
            </router-link>
          <router-link to="/clock">
          <t-menu-item value="Clock" class="menu-item">
            <template #icon>
              <t-icon name="time"/>
            </template>
            Clock
          </t-menu-item>
          </router-link>
          <router-link to ="/task">
          <t-menu-item value="Task" class="menu-item">
            <template #icon>
              <t-icon name="task"/>
            </template>
            Task
          </t-menu-item>
        </router-link>
        <router-link to ="/statistics">
          <t-menu-item value="statistics" class="menu-item">
            <template #icon>
              <t-icon name="trending-up"/>
            </template>
            Statistics
          </t-menu-item>
        </router-link>
        <router-link to="/about">
          <t-menu-item value="About" class="menu-item">
            <template #icon>
              <t-icon name="catalog"/>
            </template>
            About
          </t-menu-item>
        </router-link>
        <div class="logout-bottom">
          <router-link to="/login">
          <t-menu-item value="Logout"  class="menu-item">
            <template #icon>
              <t-icon name="logout"/>
            </template>
            Logout
          </t-menu-item>
        </router-link>
        </div>
        </t-menu>
      </t-aside>
      <t-layout>
        <t-content>
          <t-space>
            <router-view></router-view>
          </t-space>
        </t-content>
        <t-footer class ="t-footer">Personnal Managemnt Website (CS Group9)</t-footer>
      </t-layout>
    </t-layout>
  </t-layout>
</template>
<router-view v-if="$route.path.startsWith('/login')"></router-view>
</div>
</template>


<script>
import Task from './components/Task.vue'
import Clock from './components/Clock.vue'
import Login from './components/Login.vue'
  export default {
    components:
    {
      Task,
      Clock,
      Login,
    },
  }
</script>
<style>
.logout-bottom
{
  margin-top: 20px;
}
.t-footer {
  display: flex;
  margin-right: 0;
  margin-bottom: -25px;
}
.logo{
  position: relative;
  top: 8px;
  width: 100px;
  height: 50px;
}
.menu-item {
  margin-top: 50px;
}
.aside{
  width: auto;
  padding-left: 0%;
}
.head{
  width: 1190px;
}


</style>

